<form class="share-pipeline-modal-form" role="form" autocomplete="off">
  <div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">
      <span aria-hidden="true">&times;</span>
      <span class="sr-only">Close</span>
    </button>
    <h3 class="modal-title" translate="home.library.sharingSettings">Sharing Settings</h3>
  </div>
  <div class="modal-body">
    <ng-include src="'app/home/alerts/error/errorAlert.tpl.html'"></ng-include>

    <div class="add-users-groups form-horizontal" ng-if="!isACLReadyOnly">
      <div class="form-group">
        <div class="controls col-lg-offset-6 col-lg-5">
          <ui-select multiple
                     tagging
                     tagging-label=" "
                     tagging-tokens=",|ENTER"
                     ng-model="newSubjectList.value">
            <ui-select-match placeholder="{{'home.library.selectUsersAndGroupsPlaceholder' | translate}}" class="ui-select-match">{{$item}}</ui-select-match>
            <ui-select-choices class="ui-select-choices"
                               group-by="groupSubjectsFn"
                               repeat="listValue in filteredSubjects | filter:$select.search">
              <div ng-bind-html="listValue | highlight: $select.search"></div>
            </ui-select-choices>
          </ui-select>
        </div>

        <button type="button" class="btn btn-default" ng-click="inviteOthers()">Add</button>
      </div>
    </div>

    <table class="table table-hover">
      <thead>
      <tr>
        <th class="subject-col">{{'global.form.subject' | translate}}</th>
        <th class="action-col">{{'global.form.read' | translate}}</th>
        <th class="action-col">{{'global.form.write' | translate}}</th>
        <th class="action-col">{{'global.form.execute' | translate}}</th>
        <th class="action-menu-col"></th>
      </tr>
      </thead>
      <tbody ng-hide="showLoading">
      <tr ng-repeat="permission in acl.permissions track by $index">
        <td>
          <span class="fa fa-user user-icon"
                ng-class="{'fa-user': permission.subjectType === 'USER', 'fa-users': permission.subjectType === 'GROUP'}"></span>
          <span class="subject-id">{{permission.subjectId}}</span>
          <span class="is-owner"
                ng-if="permission.subjectId === acl.resourceOwner"> ({{'global.form.owner' | translate}})</span>
        </td>

        <td>
          <input type="checkbox" name="creatorReadValue"
                 ng-click="onActionToggle(permission, 'READ', $event)"
                 ng-checked="permission.actions.indexOf('READ') !== -1"
                 disabled>
        </td>
        <td>
          <input type="checkbox" name="creatorWritwValue"
                 ng-click="onActionToggle(permission, 'WRITE', $event)"
                 ng-checked="permission.actions.indexOf('WRITE') !== -1"
                 ng-disabled="permission.subjectId === acl.resourceOwner || isACLReadyOnly">
        </td>
        <td>
          <input type="checkbox" name="creatorExecuteValue"
                 ng-click="onActionToggle(permission, 'EXECUTE', $event)"
                 ng-checked="permission.actions.indexOf('EXECUTE') !== -1"
                 ng-disabled="permission.subjectId === acl.resourceOwner || isACLReadyOnly">
        </td>
        <td class="action-menu-col">
          <div class="action-menu pull-right" dropdown
               ng-if="permission.subjectId !== acl.resourceOwner && !isACLReadyOnly">
              <span class="dropdown-toggle" dropdown-toggle
                    ng-click="$event.stopPropagation();">
                <i class="fa fa-ellipsis-v"></i>
              </span>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation"
                  ng-if="permission.subjectId !== acl.resourceOwner && permission.subjectType === 'USER'">
                <a href="#" dropdown-toggle ng-click="changeOwner(permission, $index)">
                  <span>{{'global.form.isOwner' | translate}}</span>
                </a>
              </li>
              <li role="presentation"
                  ng-if="permission.subjectId !== acl.resourceOwner">
                <a href="#" dropdown-toggle ng-click="removePermission(permission, $index)">
                  <span>{{'global.form.delete' | translate}}</span>
                </a>
              </li>
            </ul>
          </div>

        </td>
      </tr>
      <tr ng-if="!acl || acl.permissions.length === 0">
        <td colspan="5">{{'global.form.noRecords' | translate}}</td>
      </tr>
      </tbody>
    </table>

    <div ng-if="!isACLEnabled" class="alert alert-info" role="alert">
      Note: Data Collector pipeline sharing (ACLs) are not enabled. Update the Data Collector configuration file to enable pipeline sharing.
    </div>

  </div>
  <div class="modal-footer">
    <button type="reset" class="btn btn-default" ng-click="cancel()"
            translate="global.form.cancel">Cancel</button>
    <button ng-if="!isACLReadyOnly" ng-click="save()" class="btn btn-primary"
            translate="global.form.save">Save</button>
  </div>
</form>
